

<!--
 * @Description: 你的代码我的心
 * @Author: GGB
 * @Date: 2021-12-21 14:36:35
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-30 10:16:49
-->
<template>
  <div class="p-4">
    <Card :bordered="false">
       <InputSearch
      v-model:value="code"
      placeholder="请输入核销码"
      allow-clear
     
      class="input-box"
      @search="onSearch"
    />
        <div class="search-content-block" v-if="order.goods">
          <div class="verify-no-block">
            <div class="verify-info">
              <div class="verify-info-inner">
                <GoodsItem v-for="(goods,index ) in order.goods" :key="index" :goods="goods" />
              </div>
              <div class="verify-info-desc">
                <p class="verify-info-desc-item">订单金额：{{ order.order_price }}</p>
                <p class="verify-info-desc-item">订单编号：{{ order.order_no }}</p>
                <p class="verify-info-desc-item">创建时间：{{ order.create_time }}</p>
                <p class="verify-info-desc-item">付款时间：{{ order.pay_time }}</p>
                <p class="verify-info-desc-item">
                  订单状态：{{ order.state_text }}
                  <a-button type="primary" @click="handleVerify">
                    {{
                      order.is_verify === 1 ? '订单已核销' : '确认使用'
                    }}
                  </a-button>
                </p>
              </div>
            </div>
          </div>
        </div>
        <Steps direction="vertical" size="small" :current="1" v-else>
          <Step title="搜索核销码" description="请顾客出示核销码并点击“核销台”， 扫描二维码或输入二维码上方的核销码" />
          <Step title="验证" description="提供有效期验证，其他信息请自行核对" />
          <Step title="验证完成" description="验证完成后，可在“核销记录”查看相关验证信息" />
        </Steps>
  </Card>
  </div>
</template>

<script setup lang="ts">

import { createVNode, ref } from "vue";
import { useMessage } from '/@/hooks/web/useMessage';
const { createMessage } = useMessage();

// // 数据模型
import { OrderRecordModel } from "../model";

// // 组件
import GoodsItem from '../components/GoodsItem.vue';
import { Card,Steps,Step,InputSearch, Modal } from "ant-design-vue";
import { verifyDetail } from "/@/api/order/verify";
import { VerifyDetailParam, VerifyType } from "/@/api/order/model/orderModel";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { overifyByCode } from "/@/api/order/event";

// // 变量
const code = ref<string>('');
const order = ref<OrderRecordModel|any>({});

// 搜索商品
const onSearch= async ()=>{
  if(!code.value) return createMessage.warning("请输入核销码");
  let param={
    verifyCode:code.value
  } as VerifyDetailParam
 let data=await  verifyDetail(param);
 order.value=data.detail
}

const handleVerify=()=>{
  if(!code.value) return createMessage.warning("请输入核销码");
  Modal.confirm({
      title: () => '提示',
      icon: () => createVNode(ExclamationCircleOutlined),
      content: () => createVNode('div', { style: 'color:red;' }, '是否确定销核该订单'),
      onOk: () => {
        let param = { verifyCode:code.value } as VerifyType
        overifyByCode(param).then(() => {
          createMessage.success("修改成功");
          code.value=''
        }).catch(() => {
          createMessage.error("修改失败");
        })
      },
    });
}
</script>

<style lang="less" scoped>
.input-box{
  width:200px;
  margin-bottom:20px;
}
.search-content-block {
  padding: 20px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  .verify-no-block {
    // padding: 20px;
    .verify-info {
      font-size: 14px;
      line-height: 30px;
      margin-bottom: 16px;
      color: #323233;

      .verify-info-inner {
        padding: 24px 16px 0;
        padding-bottom: 10px;
        overflow-y: overlay;
      }
    }

    .verify-info-desc {
      font-size: 14px;
      line-height: 30px;
      position: relative;
      margin: 0 16px 24px;
      padding-top: 16px;
      border-top: 1px solid #dcdee0;
      .verify-info-desc-item {
        color: #969799;
        line-height: 20px;
        margin: 8px 0;
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
      }
    }
  }
}
</style>